<!doctype html>
<html ng-app="myApp">
<head>
  <script src="js/angular.js"></script>
  <style type="text/css">
    .sidebox {
      background: #fff;
      border: 1px solid #e2e2e2;
      margin: 0.5em;
      padding: 0.7em;
      color: #222;
      border-radius: 4px;
      box-shadow: 2px 2px 4px #ddd;
    }
    .sidebox .header {
      border-bottom: 1px solid #333;
    }
    .sidebox .tagcloud a {
      text-decoration: none;
      color: #99b111;
    }
    ul li{
    	list-style: none;
    }
    li{
    	height: 20px;
    	margin: 10px;
    }
  
  </style>
</head>
<body>

  <div sidebox title="Links">
    <ul>
      <li>First link</li>
      <li>Second link</li>
    </ul>
  </div>

  <div sidebox title="TagCloud">
  
    <div class="tagcloud">
      <ul>
      <li><a href="">Graphics</a></li>
      <li><a href="">AngularJS</a></li>
      <li><a href="">D3</a></li>
      <li><a href="">Front-end</a></li>
      <li><a href="">Startup</a></li>
      </ul>
    </div>
  </div>

  <script>
    angular.module('myApp', [])
    .directive('sidebox', function() {
      return {
        restrict: 'EA',
        scope: {
          title: '@'
        },
        transclude: true,
        template: '<div class="sidebox">\
          <div class="content">\
            <h2 class="header">{{ title }}</h2>\
            <span class="content" ng-transclude>\
            </span>\
          </div>\
        </div>'
      }
    })
  </script>

</body>
</html>